<template>
  <div id="page">
    <el-header>
      <el-row>
        <el-col :span="8">
          <div class="header-left">
            <div class="menu">
              <div
                class="menu-item"
                v-for="(item, index) in menuonlyUrl"
                :key="index"
                @click.stop="selectMenuOnlyUrl(item)"
              >
                {{ item.title }}
                <img
                  v-if="item.children"
                  src="@/assets/IMAGES/icon_todown.png"
                  alt=""
                />
                <!--下拉框-->
                <ul class="select-box" v-if="isShowSelectBox && item.children">
                  <li
                    v-for="(ite, inde) in item.children"
                    :key="inde"
                    @click.stop="selectMenuOnlyUrl(ite)"
                  >
                    {{ ite.title }}
                  </li>
                </ul>
              </div>
            </div>
            <img src="@/assets/IMAGES/header-left.png" alt="" />
          </div>
        </el-col>
        <el-col :span="8">
          <h1>康久集团数据监控大屏</h1>
        </el-col>
        <el-col :span="8">
          <div class="header-right">
            <div class="date">{{ currentTime }}</div>
            <img src="@/assets/IMAGES/header-right.png" alt="" />
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="18">
          <div class="main-left">
            <div class="main-header">
              <div class="left-data">
                <div class="main-data">
                  <h2>总体数据</h2>
                  <div class="data-container clearfix">
                    <div
                      class="item-data"
                      v-for="(item, index) in mainData"
                      :key="index"
                      @click="jumpDataList(item.title)"
                    >
                      <div class="logo">
                        <img :src="item.logo" alt="" />
                      </div>
                      <div class="value">
                        <div class="num">{{ item.num }}</div>
                        <div class="title">{{ item.title }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="org-month">
                  <div class="org-m-header">
                    <h4>机构年收入</h4>
                    <div class="sum">总收入：{{ orgMSUM | numberFormat }}</div>
                    <div class="select-org-list">
                      <div class="org-name" @click.stop="isShowOrgBox = true">
                        {{ companyName }}
                        <img src="@/assets/IMAGES/icon_todown.png" alt="" />
                        <!--下拉框-->
                        <ul class="select-box org" v-if="isShowOrgBox">
                          <li
                            v-for="(ite, inde) in orgList"
                            :key="inde"
                            @click.stop="selectOrg(ite)"
                          >
                            {{ ite }}
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div id="org-m-chart"></div>
                </div>
              </div>
              <div id="map-chart"></div>
            </div>
            <div id="main-footer"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="main-right">
            <div class="main-data">
              <h2>付费人次</h2>
              <div class="data-container">
                <div id="pay-chart"></div>
              </div>
            </div>
            <div id="org-month">
              <div class="org-m-header">
                <h4>各机构{{ currentMonth }}月收入TOP10</h4>
                <div class="select-org-list">
                  <div class="org-name sign">(单位 元)</div>
                </div>
              </div>
              <ul id="org-m-pay">
                <li v-for="(item, index) in companyList" :key="index">
                  <div class="company-name">{{ item.name }}</div>
                  <div class="company-income">
                    <countTo
                      :startVal="0"
                      :endVal="Number(item.sum)"
                      separator=","
                      :decimals="2"
                      :duration="1000"
                    >
                    </countTo>
                  </div>

                  <div class="progress-bar">
                    <el-progress
                      :percentage="getPercent(item.sum)"
                      :stroke-width="12"
                      color="rgba(24, 219, 253, 0.8)"
                      :show-text="false"
                    ></el-progress>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>
<script>
//中国地图
import geoJson from "@/assets/REGION/china.json";
//省份机构
import pniJSON from "@/assets/JSON/provincial-number-institutions.json";
import * as echarts from "echarts/core";
import countTo from "vue-count-to";
import "echarts-liquidfill";
import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import {
  MapChart,
  BarChart,
  PieChart,
  EffectScatterChart,
  LineChart,
} from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { UniversalTransition } from "echarts/features";
import orgJson from "@/assets/JSON/org.json";
import dayIncomeJson from "@/assets/JS/day-income.js";
echarts.use([
  LineChart,
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
  PieChart,
  EffectScatterChart,
  GeoComponent,
  UniversalTransition,
]);
export default {
  name: "mainView",
  data() {
    return {
      orgMSUM: 0,
      companyName: "机构选择",
      isShowSelectBox: false,
      isShowOrgBox: false,
      menu: [
        {
          title: "云医院",
          url: "https://hospital.yyanglao.com/pc/#/billboard",
        },
        {
          title: "云药房",
          url: "yyf",
        },
        // {
        //   title: "供应链",
        //   //url: "http://192.192.4.40:8888/gmAdmin/#/login",
        //   url: "https://account.youzan.com/login",
        // },

        // {
        //     title: "云养老",
        //     url: "yyl",
        //     children: [
        //         {
        //             title: "常山孝眼",
        //             url: "http://changshan.y7100.monitor.yiy-tech.cn",
        //         },
        //         {
        //             title: "衢江养老",
        //             url: "http://220.191.238.249:8090/csadmin/#/login",
        //         },
        //     ]
        // },

        {
          title: "云养老",
          onlyLink: true,
          url: "http://61.153.191.233/jgadmin/login",
        },
        {
          title: "云商城",
          url: "http://changshan.y7100.monitor.yiy-tech.cn",
        },
      ],
      // 单url
      menuonlyUrl: [
        {
          title: "云养老",
          //url: "http://61.153.191.233/jgadmin/login?setPhone=18011223344&setPassword=223344",
          url:"http://longwill.yiy-tech.cn/jgadmin/login?setPhone=18011223344&setPassword=223344"
        },
        {
          title: "云药房",
          // url: "https://yydsdev.yiy-tech.cn/manage/#/login?setPhone=&setPassword=",
          url: "https://store.cdtongkang.com/manage",
        },
        {
          title: "云医院",
          url: "https://hospital.yyanglao.com/pc/#/login?setPhone=yzypt&setPassword=kjyzypt",
        },
        {
          title: "云商城",
          url: "https://service.guoyangshangcheng.com/gmPc/#/",
        },
      ],

      mainData: [
        {
          num: "260+",
          title: "覆盖城市",
          logo: require("@/assets/IMAGES/fgcs.png"),
        },
        {
          num: "4700+",
          title: "所属机构",
          logo: require("@/assets/IMAGES/ssjg.png"),
        },
        {
          num: "3100万+",
          title: "覆盖人群",
          logo: require("@/assets/IMAGES/fgrq.png"),
        },
        {
          num: "120万+",
          title: "活跃会员",
          logo: require("@/assets/IMAGES/hyhy.png"),
        },
        {
          num: "50万+",
          title: "付费人次",
          logo: require("@/assets/IMAGES/ffrc.png"),
        },
      ],
      orgList: [],
      companyList: [],
      currentMonth: "",
      month: "",
      imgSrc: require("@/assets/IMAGES/icon_map.png"),
      currentTime: this.$base.timeSwitch(new Date(), true),
      proviceData: [], //地图初始点亮
      incomeTitle: [
        {
          text: "月收入",
          triggerEvent: true,
          textStyle: {
            color: "#18DBFD",
            fontSize: 14,
          },
        },
      ],
    };
  },
  methods: {
    selectMenu(item) {
      if (item.title == "云养老" && !item.onlyLink) {
        this.isShowSelectBox = true;
      } else {
        let url = item.url;
        //云药房
        if (url == "yyf") {
          this.getToken();
        } else if (url.includes("http")) {
          //外链
          if (
            sessionStorage.getItem("loginInfo") &&
            JSON.parse(sessionStorage.getItem("loginInfo")).token
          ) {
            if (url == "https://hospital.yyanglao.com/pc/#/billboard") {
              let token = JSON.parse(sessionStorage.getItem("loginInfo")).token;
              window.open(url + `?token=${token}`);
            } else {
              window.open(url);
            }
          } else {
            this.$message.warning("请先登录");
            this.$router.push("/login");
          }
        }
        this.isShowSelectBox = false;
      }
    },

    // 不登陆
    selectMenuOnlyUrl(item) {
      window.open(item.url);
    },
    selectOrg(name) {
      this.companyName = name;
      this.getOrgIncome();
      this.isShowOrgBox = false;
    },
    /***云药房获取token**/
    async getToken() {
      let res = await this.$base.axiosPost(
        "https://yydsdev.yiy-tech.cn/server/user/login",
        {
          username: "demo",
          encPassword:
            "$2a$04$eJyhA799Usp63.f4XjAmoOVWrQ9iIw4hqZih1FCz4bw8JeV82/a/i",
          logintype: "backend",
        }
      );
      if (res.data.token) {
        window.open(
          "https://yydsdev.yiy-tech.cn/manage/#/login?token=" + res.data.token,
          "_blank"
        );
      } else {
        this.$message.error("访问云药房失败！");
      }
    },
    jumpDataList(title) {
      if (title == "活跃会员") {
        this.$router.push({ path: "/dataScreen/data-list", query: { title } });
      } else if (title == "所属机构") {
        this.$router.push({
          path: "/dataScreen/data-list",
          query: { title, id: "" },
        });
      }
    },
    //初始化地图机构数据
    proviceInitialValue() {
      let proviceData = [];
      for (let i = 0; i < geoJson.features.length; i++) {
        for (let j = 0; j < pniJSON.RECORDS.length; j++) {
          if (
            geoJson.features[i].properties.id == pniJSON.RECORDS[j].area_code
          ) {
            let obj = {};
            obj.id = pniJSON.RECORDS[j].area_code;
            obj.name = geoJson.features[i].properties.name;
            if (
              geoJson.features[i].properties.name == "浙江" ||
              geoJson.features[i].properties.name == "四川" ||
              geoJson.features[i].properties.name == "陕西" ||
              geoJson.features[i].properties.name == "宁夏" ||
              geoJson.features[i].properties.name == "安徽"
            ) {
              obj.value = 10;
            } else {
              if (pniJSON.RECORDS[j].count > 0) {
                obj.value = 3;
              }
            }
            obj.count = pniJSON.RECORDS[j].count;
            proviceData.push(obj);
          }
        }
      }
      this.proviceData = proviceData;
    },
    //地图
    drawMap() {
      var chartDom = document.getElementById("map-chart");
      var myChart = echarts.init(chartDom);
      myChart.resize();
      var option;
      echarts.registerMap("china", geoJson);
      myChart.setOption(
        (option = {
          tooltip: {
            trigger: "item",
            triggerOn: "mousemove|click",
            backgroundColor: "#211C35",
            borderWidth: 0,
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
            extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);",
            formatter: (e) => {
              if (e.data && e.data.count) {
                let valueStr =
                  "机构总数" +
                  "<p style='font-weight:bold;font-size:16px'>" +
                  e.data.count +
                  "</p>";
                return (
                  "<div style='display: flex'><div style='flex: 1;width:30px;height:30px;margin-right:10px;'><img src=" +
                  this.imgSrc +
                  " /></div><div style='flex: 1;'>" +
                  e.name +
                  "<br />" +
                  valueStr +
                  "</div></div>"
                );
              } else {
                return;
              }
            },
          },
          visualMap: {
            type: "piecewise", // 类型为分段型
            min: 0,
            max: 10,
            show: false,
            inRange: {
              color: ["#29243D", "rgba(24, 219, 253, 0.8)"],
            },
          },
          //通过series 中的data更新数据
          series: [
            {
              name: "中国地图",
              type: "map",
              map: "china",
              label: {
                show: true,
                color: "#fff",
                formatter: (e) => {
                  if (e.value == 10) {
                    return e.name;
                  } else {
                    return "";
                  }
                },
              },
              left: "center",
              // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
              // layoutSize: 100
              zoom: 1.2,
              itemStyle: {
                areaColor: "#29243D",
                // borderColor: "#00D1FF",
                borderWidth: 1,
                borderColor: "#18DBFD",
              },
              //高亮状态
              emphasis: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: (e) => {
                    return e.name;
                  },
                },
                itemStyle: {
                  areaColor: "#18DBFD",
                  shadowColor: "#18DBFD",
                  shadowBlur: 5,
                },
              },
              //选中
              select: {
                label: {
                  show: true,
                  color: "#fff",
                  formatter: (e) => {
                    return e.name;
                  },
                },
                itemStyle: {
                  areaColor: "#18DBFD",
                  shadowColor: "#18DBFD",
                  shadowBlur: 5,
                },
              },
              data: this.proviceData,
            },
          ],
        })
      );
      //点击地图
      myChart.on("click", (e) => {
        this.$router.push({
          path: "/dataScreen/data-list",
          query: { title: e.data.name, id: e.data.id },
        });
      });
      option && myChart.setOption(option);
    },
    //获取机构月收入数据（新接口，年收入）
    async getOrgIncome() {
      let res = await this.$base.getAjax(
        // 月收入
        // "/datadisplay/display/getOrgMonthIncome",
        // 年收入
        "/datadisplay/display/getOrgYearIncome",
        {
          org: this.companyName,
        }
      );
      if (res.data.code == 200) {
        if (res.data.data && res.data.data.length > 0) {
          this.isNo = false;

          let data = res.data.data;

          this.TKxData = data.map((e) => {
            return e.year;
          });
          this.TKData = data.map((e) => {
            return e.sum;
          });
          //机构总收入
          let sum = 0;
          for (let index = 0; index < this.TKData.length; index++) {
            sum = this.$base.accAdd(sum, this.TKData[index]);
          }
          this.orgMSUM = sum;

          if (this.TKData && this.TKData.length > 0) {
            this.$nextTick(() => {
              this.tkMIncome(this.TKxData, this.TKData);
            });
          } else {
            this.isNo = true;
          }
        } else {
          this.isNo = true;
        }
      } else {
        this.isNo = true;
      }
    },
    //获取机构列表
    async getOrgList() {
      let res = await this.$base.getAjax(
        // 月接口
        // "/datadisplay/display/getOrgMonthList",
        // 年接口
        "/datadisplay/display/getOrgYearList",
        {
          year: new Date().getFullYear(),
        }
      );
      if (res.data.code == 200) {
        this.orgList = res.data.data;
        this.companyName = this.orgList[0];
        this.getOrgIncome();
      }
    },
    //各机构月收入top10
    async getMonthTopIncome() {
      let currentDate = new Date().getDate();
      if (currentDate > 15) {
        this.month =
          new Date().getFullYear() + "-" + (new Date().getMonth() + 1);
        this.currentMonth = new Date().getMonth() + 1;
      } else {
        this.month = new Date().getFullYear() + "-" + new Date().getMonth();
        this.currentMonth = new Date().getMonth();
      }

 

      let res = await this.$base.getAjax(
        "/datadisplay/display/getMonthTopIncome",
        {
          month: this.month,
        }
      );
      if (res.data.code == 200) {
        this.companyList = res.data.data;
      }
    },
    //大业务月收入数据
    async queryModuleMonthIncome() {
      let res = await this.$base.getAjax(
        "/datadisplay/display/queryModuleMonthIncome",
        {
          year: new Date().getFullYear(),
        }
      );
      if (res.data.code == 200) {
        let data = res.data.data;
        for (let index = 0; index < dayIncomeJson.length; index++) {
          for (let j = 0; j < data.length; j++) {
            if (dayIncomeJson[index].name == data[j].org) {
              this.$set(dayIncomeJson[index], "data", data[j].list);
            }
          }
        }

        this.$nextTick(() => {
          this.daysIncome();
        });
      }
    },
    //各机构付费人次
    async queryPayCount() {
      let res = await this.$base.getAjax("/datadisplay/display/queryPayCount", {
        year: new Date().getFullYear(),
      });
      if (res.data.code == 200) {
        let FFRCJSON = res.data.data;
        this.ffrcX = FFRCJSON.map((e) => {
          return e.month;
        });
        this.ffrcData = FFRCJSON.map((e) => {
          return e.sum;
        });
        this.$nextTick(() => {
          this.MPayNum();
        });
      }
    },
    //机构月收入
    tkMIncome(TKxData, TKData) {
      var chartDom = document.getElementById("org-m-chart");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
        },
        color: ["#18DBFD"],
        grid: {                                                                                                                                                                                                                                                                                           
          top: "10%",
          left: "2%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              fontSize: 10,
              color: "#fff",
            },
            data: TKxData,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              fontSize: 10,
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: ["#ccc"],
                type: "dotted",
                opacity: 0.2,
              },
            },
          },
        ],
        series: [
          {
            name: "年收入",
            type: "line",
            // "smooth": true,
            data: TKData,
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(24, 219, 253, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(24, 219, 253, 0.17)",
                },
              ]),
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //大业务月收入
    daysIncome() {
      var chartDom = document.getElementById("main-footer");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: this.incomeTitle,
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: "#6a7985",
          //   },
          // },
        },
        legend: {
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
          data: dayIncomeJson.map((e) => {
            return e.name;
          }),
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            axisLabel: {
              fontSize: 10,
              color: "#fff",
              // interval: 25,
              // formatter: function (e, index) {
              //   return e.split('-')[0] + '-' + e.split('-')[1].split('.')[0];
              // }
            },
            axisPointer: {
              type: "shadow",
            },
            data: dayIncomeJson[3].data.map((e) => {
              return e.name;
            }),
          },
        ],
        yAxis: [
          {
            show: true,
            type: "value",
            axisLabel: {
              fontSize: 10,
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: ["#ccc"],
                type: "dotted",
                opacity: 0.2,
              },
            },
          },
          {
            show: true,
            type: "value",
            min: 0,
            max: 80000000,
            interval: 16000000,
            axisLabel: {
              fontSize: 10,
              color: "#fff",
            },
            splitLine: {
              lineStyle: {
                color: ["#ccc"],
                type: "dotted",
                opacity: 0.2,
              },
            },
          },
        ],
        series: dayIncomeJson,
      };
      myChart.on("legendselectchanged", (params) => {
        this.sumIncomeShow = true;
        let sum = 0;
        if (params.name == "区域数字康养云业务") {
          for (let index = 0; index < dayIncomeJson[0].data.length; index++) {
            sum = this.$base.accAdd(sum, dayIncomeJson[0].data[index].value);
          }
          sum = this.numberFormat(sum);
        } else if (params.name == "医养机构管理与运营") {
          for (let index = 0; index < dayIncomeJson[1].data.length; index++) {
            sum = this.$base.accAdd(sum, dayIncomeJson[1].data[index].value);
          }
          sum = this.numberFormat(sum);
        } else if (params.name == "数字康养服务与供应链渠道管理") {
          for (let index = 0; index < dayIncomeJson[2].data.length; index++) {
            sum = this.$base.accAdd(sum, dayIncomeJson[2].data[index].value);
          }
          sum = this.numberFormat(sum);
        } else if (params.name == "总收入") {
          for (let index = 0; index < dayIncomeJson[3].data.length; index++) {
            sum = this.$base.accAdd(sum, dayIncomeJson[3].data[index].value);
          }
          sum = this.numberFormat(sum);
        }
        this.incomeTitle = [
          {
            text: "月收入",
            triggerEvent: true,
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
          {
            show: this.sumIncomeShow,
            right: "10",
            text: "总收入：" + sum,
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
        ];
        myChart.dispose();
        this.daysIncome();

        myChart.setOption({
          legend: { selected: { [params.name]: true } },
        });
      });
      //点击
      myChart.on("click", (e) => {
        if (e.componentType === "title") {
          let sum = 0;
          this.sumIncomeShow = !this.sumIncomeShow;
          for (let index = 0; index < dayIncomeJson[3].data.length; index++) {
            sum = this.$base.accAdd(sum, dayIncomeJson[3].data[index].value);
          }
          sum = this.numberFormat(sum);

          this.incomeTitle = [
            {
              text: "月收入",
              triggerEvent: true,
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            {
              show: this.sumIncomeShow,
              right: "10",
              text: "总收入：" + sum,
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
          ];
          myChart.dispose();
          this.daysIncome();
        }
      });
      option && myChart.setOption(option);
    },
    //付费人次
    MPayNum() {
      var chartDom = document.getElementById("pay-chart");
      var myChart = echarts.init(chartDom);
      console.log(this.ffrcData);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "7%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLabel: {
              color: "#fff",
              fontSize: 10,
            },
            data: this.ffrcX,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              fontSize: 10,
              color: "#fff",
            },
            axisLine: {
              show: true,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "付费人次",
            data: this.ffrcData,
            type: "bar",
            //barWidth: 12,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#28BAF3" },
                { offset: 1, color: "rgba(24,219,253,0)" },
              ]),
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    getPercent(v) {
      if (v > 0) {
        return this.$base.accDiv(v, 100000);
      } else {
        return 0;
      }
    },
    //金额格式化
    numberFormat(value) {
      if (value !== undefined && value !== null) {
        let str = value.toString();
        let reg =
          str.indexOf(".") > -1
            ? /(\d)(?=(\d{3})+\.)/g
            : /(\d)(?=(?:\d{3})+$)/g;
        return str.replace(reg, "$1,");
      } else {
        return "0";
      }
    },
  },
  components: { countTo },
  created() {
    this.ffrcData = [];
    this.proviceInitialValue();

    this.orgxData = orgJson.list.map((e) => {
      return e.name;
    });

    this.getOrgList();
    this.queryPayCount();
    this.queryModuleMonthIncome();
    this.getMonthTopIncome();
  },
  mounted() {
    setInterval(() => {
      this.currentTime = this.$base.timeSwitch(new Date(), true);
    }, 1000);

    this.$nextTick(() => {
      this.drawMap();
    });

    document.addEventListener("click", () => {
      this.isShowSelectBox = false;
      this.isShowOrgBox = false;
    });
  },
};
</script>
<style lang="scss" scoped>
#page {
  background: #130b36;
}

.el-header {
  padding: 0 20px;
  height: 7vh !important;

  .header-left,
  .header-right {
    height: 7vh;
    position: relative;

    img {
      position: absolute;
      bottom: 10px;
      height: 18px;
      width: 100%;
    }
  }

  .header-left {
    .menu {
      position: absolute;
      z-index: 1;
      left: 20px;
      top: 15px;
      display: flex;
      align-items: center;

      .menu-item {
        position: relative;
        text-align: center;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        line-height: 35px;
        width: 80px;
        height: 35px;
        border-radius: 4px;
        margin-right: 10px;
        box-sizing: border-box;
        cursor: pointer;
        border: 1px solid #3153a1;

        img {
          margin-left: 4px;
          width: 10px;
          height: 6px;
        }
      }

      .menu-item:last-child {
        margin-right: 0;
      }
    }
  }

  .header-right {
    .date {
      position: absolute;
      right: 80px;
      top: 30px;
      font-size: 16px;
      font-weight: 600;
      color: #ccc;
      line-height: 24px;
      letter-spacing: 1px;
    }
  }

  h1 {
    font-size: 44px;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
  }
}

.el-main {
  padding: 2vh 2vh 0;
  margin: 0 2vh;
  box-sizing: border-box;
  min-height: 93vh;
  background-image: url(../../assets/IMAGES/bg@2x.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .main-left,
  .main-right {
    height: 100%;
  }

  .main-data {
    height: 30vh;
    padding: 2vh;
    box-sizing: border-box;

    h2 {
      font-size: 20px;
      color: #ffffff;
      font-weight: bold;
      font-family: Arial;
      text-align: center;
      letter-spacing: 2px;
    }

    .data-container {
      padding: 2vh;
      height: 24vh;
      box-sizing: border-box;
      background-image: url(../../assets/IMAGES/main_bg.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .item-data {
        display: flex;
        align-items: center;
        float: left;
        height: 6vh;
        width: calc(50% - 20px);
        margin-left: 20px;
        margin-bottom: 10px;

        .logo {
          height: 35px;
          width: 35px;
          margin-right: 10px;
          color: #fff;

          img {
            height: 100%;
          }
        }

        .value {
          color: #ffffff;

          .num {
            font-size: 25px;
            font-family: Arial;
            letter-spacing: 2px;
          }

          .title {
            font-size: 14px;
            letter-spacing: 2px;
          }
        }
      }
      .item-data:nth-child(2),
      .item-data:nth-child(4) {
        cursor: pointer;
      }
    }

    #pay-chart {
      height: 20vh;
    }
  }

  #org-month {
    height: 30vh;
    margin: 0 2vh;
    padding: 2vh;
    box-sizing: border-box;
    background-image: url(../../assets/IMAGES/month_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .org-m-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      h4 {
        font-size: 15px;
        font-weight: 600;
        color: #18dbfd;
      }

      .select-org-list {
        position: relative;

        .org-name {
          display: flex;
          align-items: center;
          justify-content: space-around;
          font-size: 12px;
          font-weight: 400;
          color: #bcc8d4;
          min-width: 110px;
          height: 26px;
          padding: 0 10px;
          cursor: pointer;
          border-radius: 13px;
          border: 1px solid #17336d;

          img {
            width: 10px;
            height: 6px;
          }
        }

        .sign {
          border: none;
          cursor: default;
        }
      }
    }

    #org-m-chart {
      height: 24vh;
    }
  }

  .main-right {
    #org-month {
      height: calc(70vh - 132px);
    }

    #org-m-pay {
      height: calc(100% - 28px);
      padding: 12px;
      box-sizing: border-box;
      overflow-y: scroll;
      box-sizing: border-box;

      li {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        color: #fff;
        flex-wrap: wrap;
        justify-content: space-between;

        .company-name {
          flex: 1;
          margin-right: 12px;
        }

        .company-income {
          font-size: 16px;
          font-weight: bold;
        }

        .progress-bar {
          position: relative;
          margin-top: 3px;
          width: 100%;
          // overflow: hidden;
          // border-radius: 9px;
          // background-color: rgba($color: #fff, $alpha: 0.1);
        }

        // .progress-bar::after {
        //     position: absolute;
        //     content: "";
        //     width: 80%;
        //     height: 12px;
        //     box-shadow: 0px 0px 6px 0px rgba(24, 219, 253, 0.5);
        //     background: linear-gradient(90deg, rgba(24, 219, 253, 0) 0%, #18DBFD);
        //     border-radius: 9px;
        // }
      }
    }
  }

  .main-header {
    display: flex;

    .left-data {
      width: 25vw;
      height: 60vh;
    }

    #map-chart {
      height: 60vh;
      padding-top: 2vh;
      box-sizing: border-box;
      flex: 1;
    }
  }

  #main-footer {
    margin: 1vh 2vh 2vh;
    padding: 2vh;
    height: calc(40vh - 142px);
    box-sizing: border-box;
    background-image: url(../../assets/IMAGES/month_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.select-box {
  position: absolute;
  top: 36px;
  z-index: 3;
  width: 100px;
  height: 60px;
  padding: 5px 0;
  background: #120e4a;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #3153a1;

  li {
    width: 100px;
    height: 30px;
    line-height: 30px;
    color: #ccc;
    font-size: 14px;
    text-align: center;
  }

  li:hover,
  .active {
    color: #fff;
    background: rgba(24, 219, 253, 0.5);
  }
}

.org {
  top: 30px;
  width: 110px;
  height: 109px;
  font-size: 12px;
  background: #13144d;
  border-radius: 12px;
  overflow-y: auto;
  border: 1px solid #17336d;

  li {
    width: 110px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

.sum {
  color: #fff;
  font-weight: bold;
}
</style>